<template>
  <Card>
    <Row>
      <Form  inline :label-width="70" class="search-form"  >
        <Form-item label="商品名称" prop="productName">
          <Input type="text" clearable placeholder="请输入商品名称"  />
        </Form-item>
        <Form-item label="选择店铺" prop="skuCode">
          <Input placeholder="选择店铺" style="width: auto" readonly >
            <Icon type="ios-search" slot="suffix" @click="selectProduct" />
          </Input>
          <modal width="350px" v-model="showProduct"></modal>
        </Form-item>
        <Form-item label="产品类型" prop="categoryId">
          <Select placeholder="请选择" style="width:180px" >
            <Option value="0" >请选择</Option>
          </Select>
        </Form-item>
<!--        <span v-if="drop">-->
<!--            <FormItem label="印刷内容" prop="printContent">-->
<!--            <Input type="text" clearable placeholder="请输入印刷的内容" v-model="searchForm.printContent"/>-->
<!--            </FormItem>-->
<!--            <FormItem label="打孔描述" prop="punchInfo">-->
<!--            <Input type="text" clearable placeholder="请输入打孔描述" style="width: 205px;"  v-model="searchForm.punchInfo"/>-->
<!--            </FormItem>-->
<!--            <FormItem label="产品等级" prop="productLevel" style="width:235px" >-->
<!--              <Select placeholder="请选择" style="width:165px" v-model="searchForm.productLevel">-->
<!--                <Option v-for="item in $store.state.codeStatic.customerLevels" :value="item.key" :key="item.key" >{{ item.value}}</Option>-->
<!--              </Select>-->
<!--            </FormItem>-->
<!--            <Form-item label="是否外发" prop="isOutSourced">-->
<!--              <Select placeholder="请选择" style="width:165px" v-model="searchForm.isOutSourced">-->
<!--                <Option value="1">是</Option>-->
<!--                <Option value="0">否</Option>-->
<!--              </Select>-->
<!--            </Form-item>-->
<!--          </span>-->
        <Form-item style="margin-left:-35px;">
          <Button @click="handleSearch" type="primary" icon="md-search" class="btnMargLeft">搜索</Button>
          <Button @click="handleReset" class="btnMargLeft">重置</Button>
          <a class="drop-down"  >
            <Icon ></Icon>
          </a>
        </Form-item>
      </Form>
    </Row>
      <br>
      <Row>
        <Table border :columns="columns12" :data="data6">
          <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
          </template>
        </Table>
      </Row>
  </Card>
</template>
<script>
export default {
  name: 'productManager',
  data () {
    return {
      showProduct: false,
      columns12: [
        {
          title: 'Name',
          slot: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data6: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    }
  },
  methods: {
    selectProduct () {
      this.showProduct = true
    },
    handleSearch () {

    },
    handleReset () {

    }
  }
}
</script>

<style scoped>

</style>
